﻿<!DOCTYPE html>
<html>
  <head>
    <title>表单示例 Form Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/_____form_example/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/_____form_example/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u9318" class="ax_default" data-label="背景">
        <div id="u9318_state0" class="panel_state" data-label="State1" style="">
          <div id="u9318_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u9319" class="ax_default" data-label="线条">
        <div id="u9319_state0" class="panel_state" data-label="State1" style="">
          <div id="u9319_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9320" class="ax_default _默认样式">
        <div id="u9320_div" class=""></div>
        <div id="u9320_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9321" class="ax_default _默认样式">
        <div id="u9321_div" class=""></div>
        <div id="u9321_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u9323" class="ax_default _默认样式">
        <img id="u9323_img" class="img " src="images/___icons/u605.png"/>
        <div id="u9323_text" class="text ">
          <p><span>Copyright © </span><a id="u9324" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9325" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="160">

        <!-- Unnamed (Rectangle) -->
        <div id="u9326" class="ax_default _默认样式">
          <div id="u9326_div" class=""></div>
          <div id="u9326_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:14px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;">在实际的项目原型设计中，出于节约时间成本和便于维护等因素考虑，建议不要过多的使用动态的表单效果。可以使用专门的示例页面将类同的表单交互样式呈现出来，列出相关的状态示例和交互说明，供UI和前端人员进行参考。另外，原型中相关字段的校验规则和提示文案建议直接在对应的表单元件上进行备注，在Axure中选中元件时在右侧的说明中可以添加备注信息，演示时点击对应元件右上角的备注图标即可查看。注意，下面的备注示例中的说明是添加在对应的矩形元件上的，编辑时默认选中的是图标和矩形的组合，需要点击矩形两次才能选中。扩展阅读文章：</span><a id="u9327" class="link"><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;">实战经验！如何做好网页后台的表单和表格设计？</span></a><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">、</span><a id="u9328" class="link"><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;">这7个秘诀，能帮你做出体验极佳的网页表单</span></a><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">、</span><a id="u9329" class="link"><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;">表单经典原则是错的？来看这5个表单设计新规则</span></a></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9330" class="ax_default _默认样式">
          <div id="u9330_div" class=""></div>
          <div id="u9330_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9331" class="ax_default _默认样式">
        <div id="u9331_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9332" class="ax_default _默认样式">
        <div id="u9332_div" class=""></div>
        <div id="u9332_text" class="text ">
          <p><span>输入框状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9333" class="ax_default _默认样式">
        <div id="u9333_div" class=""></div>
        <div id="u9333_text" class="text ">
          <p><span>悬停状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9334" class="ax_default _默认样式">
        <div id="u9334_div" class=""></div>
        <div id="u9334_text" class="text ">
          <p><span>禁用状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9335" class="ax_default" data-left="200" data-top="549" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9336" class="ax_default _默认样式">
          <div id="u9336_div" class=""></div>
          <div id="u9336_text" class="text ">
            <p><span>清除按纽</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9337" class="ax_default _默认样式">
          <div id="u9337_div" class=""></div>
          <div id="u9337_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9338" class="ax_default _默认样式">
        <div id="u9338_div" class=""></div>
        <div id="u9338_text" class="text ">
          <p><span>默认状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9339" class="ax_default _默认样式">
        <div id="u9339_div" class=""></div>
        <div id="u9339_text" class="text ">
          <p><span>输入状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9340" class="ax_default _默认样式">
        <div id="u9340_div" class=""></div>
        <div id="u9340_text" class="text ">
          <p><span>默认状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9341" class="ax_default _默认样式">
        <div id="u9341_div" class=""></div>
        <div id="u9341_text" class="text ">
          <p><span>悬停状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9342" class="ax_default _默认样式">
        <div id="u9342_div" class=""></div>
        <div id="u9342_text" class="text ">
          <p><span>输入状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9343" class="ax_default _默认样式">
        <div id="u9343_div" class=""></div>
        <div id="u9343_text" class="text ">
          <p><span>清除按纽：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9344" class="ax_default _默认样式">
        <div id="u9344_div" class=""></div>
        <div id="u9344_text" class="text ">
          <p><span>禁用状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9345" class="ax_default _默认样式">
        <div id="u9345_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9346" class="ax_default _默认样式">
        <div id="u9346_div" class=""></div>
        <div id="u9346_text" class="text ">
          <p><span>单选框状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9347" class="ax_default" data-left="140" data-top="1289" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9348" class="ax_default _默认样式">
          <img id="u9348_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9348_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 默认效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9349" class="ax_default" data-left="240" data-top="1289" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9350" class="ax_default _默认样式">
          <img id="u9350_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9350_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 悬停效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9351" class="ax_default" data-left="340" data-top="1289" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9352" class="ax_default _默认样式">
          <img id="u9352_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9352_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 选中效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9353" class="ax_default" data-left="140" data-top="1329" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9354" class="ax_default _默认样式">
          <img id="u9354_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9354_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 禁用效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9355" class="ax_default" data-left="240" data-top="1329" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9356" class="ax_default _默认样式">
          <img id="u9356_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9356_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 选中禁用</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9357" class="ax_default _默认样式">
        <div id="u9357_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9358" class="ax_default _默认样式">
        <div id="u9358_div" class=""></div>
        <div id="u9358_text" class="text ">
          <p><span>复选框状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9359" class="ax_default" data-left="142" data-top="1486" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9360" class="ax_default _默认样式">
          <img id="u9360_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9360_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 默认效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9361" class="ax_default" data-left="242" data-top="1486" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9362" class="ax_default _默认样式">
          <img id="u9362_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9362_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 悬停效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9363" class="ax_default" data-left="342" data-top="1486" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9364" class="ax_default _默认样式">
          <img id="u9364_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9364_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 选中效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9365" class="ax_default" data-left="142" data-top="1526" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9366" class="ax_default _默认样式">
          <img id="u9366_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9366_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 禁用效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9367" class="ax_default" data-left="242" data-top="1526" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9368" class="ax_default _默认样式">
          <img id="u9368_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9368_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 选中禁用</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9369" class="ax_default _默认样式">
        <div id="u9369_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9370" class="ax_default _默认样式">
        <div id="u9370_div" class=""></div>
        <div id="u9370_text" class="text ">
          <p><span>开关状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9371" class="ax_default" data-left="200" data-top="1683" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9372" class="ax_default _默认样式">
          <img id="u9372_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u9372_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9373" class="ax_default _默认样式">
        <div id="u9373_div" class=""></div>
        <div id="u9373_text" class="text ">
          <p><span>关闭状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9374" class="ax_default _默认样式">
        <img id="u9374_img" class="img " src="images/单选框_radio/u5244.png"/>
        <div id="u9374_text" class="text ">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9375" class="ax_default _默认样式">
        <div id="u9375_div" class=""></div>
        <div id="u9375_text" class="text ">
          <p><span>开启状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9376" class="ax_default _默认样式">
        <div id="u9376_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9377" class="ax_default _默认样式">
        <div id="u9377_div" class=""></div>
        <div id="u9377_text" class="text ">
          <p><span>下拉框状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9378" class="ax_default" data-left="200" data-top="932" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9379" class="ax_default _默认样式">
          <div id="u9379_div" class=""></div>
          <div id="u9379_text" class="text ">
            <p><span>悬停状态</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9380" class="ax_default _默认样式">
          <div id="u9380_div" class=""></div>
          <div id="u9380_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9381" class="ax_default" data-left="200" data-top="872" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9382" class="ax_default _默认样式">
          <div id="u9382_div" class=""></div>
          <div id="u9382_text" class="text ">
            <p><span>默认状态</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9383" class="ax_default _默认样式">
          <div id="u9383_div" class=""></div>
          <div id="u9383_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9384" class="ax_default" data-left="200" data-top="992" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9385" class="ax_default _默认样式">
          <div id="u9385_div" class=""></div>
          <div id="u9385_text" class="text ">
            <p><span>选择状态</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9386" class="ax_default _默认样式">
          <div id="u9386_div" class=""></div>
          <div id="u9386_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9387" class="ax_default" data-left="200" data-top="1052" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9388" class="ax_default _默认样式">
          <div id="u9388_div" class=""></div>
          <div id="u9388_text" class="text ">
            <p><span>已选状态</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9389" class="ax_default _默认样式">
          <div id="u9389_div" class=""></div>
          <div id="u9389_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9390" class="ax_default" data-left="200" data-top="1112" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9391" class="ax_default _默认样式">
          <div id="u9391_div" class=""></div>
          <div id="u9391_text" class="text ">
            <p><span>禁用状态</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9392" class="ax_default _默认样式">
          <div id="u9392_div" class=""></div>
          <div id="u9392_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9393" class="ax_default _默认样式">
        <div id="u9393_div" class=""></div>
        <div id="u9393_text" class="text ">
          <p><span>默认状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9394" class="ax_default _默认样式">
        <div id="u9394_div" class=""></div>
        <div id="u9394_text" class="text ">
          <p><span>悬停状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9395" class="ax_default _默认样式">
        <div id="u9395_div" class=""></div>
        <div id="u9395_text" class="text ">
          <p><span>选择状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9396" class="ax_default _默认样式">
        <div id="u9396_div" class=""></div>
        <div id="u9396_text" class="text ">
          <p><span>已选状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9397" class="ax_default _默认样式">
        <div id="u9397_div" class=""></div>
        <div id="u9397_text" class="text ">
          <p><span>禁用状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9398" class="ax_default _默认样式">
        <div id="u9398_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9399" class="ax_default _默认样式">
        <div id="u9399_div" class=""></div>
        <div id="u9399_text" class="text ">
          <p><span>字段校验及提示示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9400" class="ax_default" data-left="760" data-top="1040" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9401" class="ax_default _默认样式">
          <div id="u9401_div" class=""></div>
          <div id="u9401_text" class="text ">
            <p><span>小黑黑</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9402" class="ax_default _默认样式">
          <div id="u9402_div" class=""></div>
          <div id="u9402_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9403" class="ax_default _默认样式">
        <div id="u9403_div" class=""></div>
        <div id="u9403_text" class="text ">
          <p><span>验证正确：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9404" class="ax_default _默认样式">
        <div id="u9404_div" class=""></div>
        <div id="u9404_text" class="text ">
          <p><span>错误提示：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9405" class="ax_default _默认样式">
        <div id="u9405_div" class=""></div>
        <div id="u9405_text" class="text ">
          <p><span>为空提示：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9406" class="ax_default _默认样式">
        <div id="u9406_div" class=""></div>
        <div id="u9406_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">验证示例</span><span style="font-family:'微软雅黑';font-weight:400;">：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9407" class="ax_default _默认样式">
        <div id="u9407_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9408" class="ax_default _默认样式">
        <div id="u9408_div" class=""></div>
        <div id="u9408_text" class="text ">
          <p><span>字段规则及提示备注示例</span></p>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9409" class="ax_default" data-label="输入框" data-left="730" data-top="367" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9410" class="ax_default _默认样式">
          <div id="u9410_div" class=""></div>
          <div id="u9410_text" class="text ">
            <p><span>请输入用户名称</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9410_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9411" class="ax_default _默认样式">
          <div id="u9411_div" class=""></div>
          <div id="u9411_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9412" class="ax_default" data-label="输入框" data-left="730" data-top="487" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9413" class="ax_default _默认样式">
          <div id="u9413_div" class=""></div>
          <div id="u9413_text" class="text ">
            <p><span>请输入手机号码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9413_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9414" class="ax_default _默认样式">
          <div id="u9414_div" class=""></div>
          <div id="u9414_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9415" class="ax_default _默认样式">
        <div id="u9415_div" class=""></div>
        <div id="u9415_text" class="text ">
          <p><span>注册</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) [footnote] -->
      <div id="u9415_ann" class="annotation"></div>

      <!-- Unnamed (Group) -->
      <div id="u9416" class="ax_default" data-left="730" data-top="717" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9417" class="ax_default _默认样式">
          <img id="u9417_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
          <div id="u9417_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#999999;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> </span><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;color:#999999;">勾选同意《</span><a id="u9418" class="link"><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;">用户服务协议</span></a><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;color:#999999;">》</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9417_ann" class="annotation"></div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9419" class="ax_default" data-label="输入框" data-left="730" data-top="547" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9420" class="ax_default _默认样式">
          <div id="u9420_div" class=""></div>
          <div id="u9420_text" class="text ">
            <p><span>请输入短信验证码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9420_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9421" class="ax_default _默认样式">
          <div id="u9421_div" class=""></div>
          <div id="u9421_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9422" class="ax_default" data-label="输入框" data-left="730" data-top="607" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9423" class="ax_default _默认样式">
          <div id="u9423_div" class=""></div>
          <div id="u9423_text" class="text ">
            <p><span>设置6至20位登录密码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9423_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9424" class="ax_default _默认样式">
          <div id="u9424_div" class=""></div>
          <div id="u9424_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9425" class="ax_default" data-label="输入框" data-left="730" data-top="667" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9426" class="ax_default _默认样式">
          <div id="u9426_div" class=""></div>
          <div id="u9426_text" class="text ">
            <p><span>请再次输入登录密码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9426_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9427" class="ax_default _默认样式">
          <div id="u9427_div" class=""></div>
          <div id="u9427_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 验证码 (Dynamic Panel) -->
      <div id="u9428" class="ax_default" data-label="验证码">
        <div id="u9428_state0" class="panel_state" data-label="首次发送状态" style="">
          <div id="u9428_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u9429" class="ax_default _默认样式">
              <div id="u9429_div" class=""></div>
              <div id="u9429_text" class="text ">
                <p><span>发送验证码</span></p>
              </div>
            </div>
          </div>
        </div>
        <div id="u9428_state1" class="panel_state" data-label="倒计时状态" style="visibility: hidden;">
          <div id="u9428_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u9430" class="ax_default _默认样式">
              <div id="u9430_div" class=""></div>
              <div id="u9430_text" class="text ">
                <p><span>60秒后可重发</span></p>
              </div>
            </div>
          </div>
        </div>
        <div id="u9428_state2" class="panel_state" data-label="重新发送状态" style="visibility: hidden;">
          <div id="u9428_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u9431" class="ax_default _默认样式">
              <div id="u9431_div" class=""></div>
              <div id="u9431_text" class="text ">
                <p><span>重发验证码</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 验证码 (Dynamic Panel) [footnote] -->
      <div id="u9428_ann" class="annotation"></div>

      <!-- Unnamed (Group) -->
      <div id="u9432" class="ax_default" data-left="730" data-top="427" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9433" class="ax_default _默认样式">
          <div id="u9433_div" class=""></div>
          <div id="u9433_text" class="text ">
            <p><span>请选择用户类型</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) [footnote] -->
        <div id="u9433_ann" class="annotation"></div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9434" class="ax_default _默认样式">
          <div id="u9434_div" class=""></div>
          <div id="u9434_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9435" class="ax_default _默认样式">
          <div id="u9435_div" class=""></div>
          <div id="u9435_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9436" class="ax_default _默认样式">
        <div id="u9436_div" class=""></div>
        <div id="u9436_text" class="text ">
          <p><span>完成状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9437" class="ax_default _默认样式">
        <div id="u9437_div" class=""></div>
        <div id="u9437_text" class="text ">
          <p><span>完成状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9438" class="ax_default" data-left="760" data-top="960" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9439" class="ax_default _默认样式">
          <div id="u9439_div" class=""></div>
          <div id="u9439_text" class="text ">
            <p><span>小黑黑</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9440" class="ax_default _默认样式">
          <div id="u9440_div" class=""></div>
          <div id="u9440_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9441" class="ax_default" data-left="760" data-top="1120" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9442" class="ax_default _默认样式">
          <div id="u9442_div" class=""></div>
          <div id="u9442_text" class="text ">
            <p><span>小黑黑</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9443" class="ax_default _默认样式">
          <div id="u9443_div" class=""></div>
          <div id="u9443_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9444" class="ax_default" data-left="760" data-top="1200" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9445" class="ax_default _默认样式">
          <div id="u9445_div" class=""></div>
          <div id="u9445_text" class="text ">
            <p><span>小黑黑</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9446" class="ax_default _默认样式">
          <div id="u9446_div" class=""></div>
          <div id="u9446_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9447" class="ax_default" data-left="760" data-top="1280" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9448" class="ax_default _默认样式">
          <div id="u9448_div" class=""></div>
          <div id="u9448_text" class="text ">
            <p><span>小黑黑</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9449" class="ax_default _默认样式">
          <div id="u9449_div" class=""></div>
          <div id="u9449_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9450" class="ax_default" data-left="760" data-top="1368" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9451" class="ax_default _默认样式">
          <div id="u9451_div" class=""></div>
          <div id="u9451_text" class="text ">
            <p><span>请输入用户名称</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9452" class="ax_default _默认样式">
          <div id="u9452_div" class=""></div>
          <div id="u9452_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9453" class="ax_default" data-left="760" data-top="1448" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9454" class="ax_default _默认样式">
          <div id="u9454_div" class=""></div>
          <div id="u9454_text" class="text ">
            <p><span>请选择用户类型</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9455" class="ax_default _默认样式">
          <div id="u9455_div" class=""></div>
          <div id="u9455_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9456" class="ax_default _默认样式">
          <div id="u9456_div" class=""></div>
          <div id="u9456_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9457" class="ax_default _默认样式">
        <img id="u9457_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
        <div id="u9457_text" class="text ">
          <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#999999;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> </span><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;color:#999999;">勾选同意《</span><a id="u9458" class="link"><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;">用户服务协议</span></a><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;font-size:14px;color:#999999;">》</span></p>
        </div>
      </div>

      <!-- 错误提示 (Rectangle) -->
      <div id="u9459" class="ax_default _默认样式" data-label="错误提示">
        <div id="u9459_div" class=""></div>
        <div id="u9459_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 用户名首位必须为字母</span></p>
        </div>
      </div>

      <!-- 错误提示 (Rectangle) -->
      <div id="u9460" class="ax_default _默认样式" data-label="错误提示">
        <div id="u9460_div" class=""></div>
        <div id="u9460_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 用户名必须为6至20位字母或字母和数字组合</span></p>
        </div>
      </div>

      <!-- 警告提示 (Rectangle) -->
      <div id="u9461" class="ax_default _默认样式" data-label="警告提示">
        <div id="u9461_div" class=""></div>
        <div id="u9461_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 请选择用户类型</span></p>
        </div>
      </div>

      <!-- 警告提示 (Rectangle) -->
      <div id="u9462" class="ax_default _默认样式" data-label="警告提示">
        <div id="u9462_div" class=""></div>
        <div id="u9462_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 注册时必须勾选同意协议</span></p>
        </div>
      </div>

      <!-- 成功提示 (Rectangle) -->
      <div id="u9463" class="ax_default _默认样式" data-label="成功提示">
        <img id="u9463_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
        <div id="u9463_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 该用户名可用</span></p>
        </div>
      </div>

      <!-- 警告提示 (Rectangle) -->
      <div id="u9464" class="ax_default _默认样式" data-label="警告提示">
        <div id="u9464_div" class=""></div>
        <div id="u9464_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 用户名不能为空</span></p>
        </div>
      </div>

      <!-- 错误提示 (Rectangle) -->
      <div id="u9465" class="ax_default _默认样式" data-label="错误提示">
        <div id="u9465_div" class=""></div>
        <div id="u9465_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 该用户名已被占用</span></p>
        </div>
      </div>

      <!-- 成功提示 (Rectangle) -->
      <div id="u9466" class="ax_default _默认样式" data-label="成功提示">
        <img id="u9466_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
        <div id="u9466_text" class="text ">
          <p><span style="font-family:'ArialMT', 'Arial';font-weight:400;">&nbsp;</span><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 用户名校验</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9467" class="ax_default _默认样式">
        <div id="u9467_div" class=""></div>
        <div id="u9467_text" class="text ">
          <p><span>小黑黑</span></p>
        </div>
      </div>

      <!-- 成功提示 (Rectangle) -->
      <div id="u9468" class="ax_default _默认样式" data-label="成功提示">
        <img id="u9468_img" class="img " src="images/_____form_example/成功提示_u9468.png"/>
        <div id="u9468_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 用户名为6至20位字母或字母和数字组合</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9469" class="ax_default _默认样式">
        <div id="u9469_div" class=""></div>
        <div id="u9469_text" class="text ">
          <p><span>输入提示：</span></p>
        </div>
      </div>

      <!-- 填写帮助 (Group) -->
      <div id="u9470" class="ax_default" data-label="填写帮助" data-left="757" data-top="1608" data-width="89" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9471" class="ax_default _默认样式">
          <div id="u9471_div" class=""></div>
          <div id="u9471_text" class="text ">
            <p style="font-size:16px;"><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:12px;"> 帮助提示</span></p>
          </div>
        </div>

        <!-- 提示 (Speech Bubble) -->
        <div id="u9472" class="ax_default _默认样式 ax_default_hidden" data-label="提示" style="display:none; visibility: hidden">
          <img id="u9472_img" class="img " src="images/_____form_example/提示_u9472.png"/>
          <div id="u9472_text" class="text ">
            <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> 帮助提示文字内容</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9473" class="ax_default _默认样式">
        <div id="u9473_div" class=""></div>
        <div id="u9473_text" class="text ">
          <p><span>帮助提示：</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
